<script setup lang="ts">
import { Icon } from '@/components/Icon'
import { useFullscreen } from '@vueuse/core'
import { propTypes } from '@/utils/propTypes'
import { useDesign } from '@/hooks/web/useDesign'
import { ElBadge } from 'element-plus'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('bell-outlined')

defineProps({
  color: propTypes.string.def('')
})

const { toggle } = useFullscreen()

const onClickMessage = () => {
  console.log('onClickMessage')
}
</script>

<template>
  <div :class="prefixCls" @click="onClickMessage">
    <el-badge :value="12" class="item">
      <Icon :size="18" icon="vi-ant-design:bell-outlined" :color="color" />
    </el-badge>
  </div>
</template>
